import ReactDOM from 'react-dom'
import './index.css'

// jsx样式-className   js原生的方式处理多个类名变化

// 是否加上active或者block类名
const isActive = true
const isBlock = false

// 模仿vue的方式，对象方式：key类名，value是否加这个类名
const classObject = {
  button: true,
  active: isActive,
  block: isBlock
}

// 需要使用js的能力转换为字符串
// 1. Object.keys(classObject)  ===>  ['button','active','block']
// 2. Object.keys(classObject).filter(key=>classObject[key])  ===> ['button','active']
// 3. button ative 字符串
const classStr = Object.keys(classObject).filter(key=>classObject[key]).join(' ')

const element = <span className={classStr}>按钮</span>

ReactDOM.render(element, document.getElementById('root'))